<template>
  <div v-if="index === 0">
    <div class="swiper">
      <van-swipe class="my-swipe" :autoplay="3000">
        <van-swipe-item>
          <img
            style="width: 100%; height: 80px; object-fit: cover"
            src="https://img1.baidu.com/it/u=1599947592,1695977044&fm=253&fmt=auto&app=138&f=JPEG?w=640&h=440"
          />
        </van-swipe-item>
        <van-swipe-item>
          <img
            style="width: 100%; height: 80px; object-fit: cover"
            src="https://img.zcool.cn/community/01c67960641eed11013fb1175b580c.jpg@1280w_1l_2o_100sh.jpg"
          />
        </van-swipe-item>
      </van-swipe>
    </div>
    <div class="order">
      <van-row >
        
        <van-col span="24" class="desc">
          <van-tree-select
            v-model:main-active-index="active"
            height="100vh"
            :items="items"
            @click-nav="navClick"
          >
            <template #content  >
              <van-tag class="top-tag" size="large">
                <span class="star"
                  ><van-icon name="star" color="#ac905e" />精选</span
                >
                <span class="mustBuy"  >进店必买</span>
              </van-tag> 
              <div  v-for="(i) in subItem" :key="i">                       
         
                <FoodList :handleAddCart="handleAddCart" :foodList="i" :showAdd="true" :addPoint="addPoint" :addClick="addClick" :onChange="onChange"/>           
             
              </div>
            </template>
          </van-tree-select>
        </van-col>
      </van-row>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs } from "vue";
import FoodList from "../../../components/FoodList";
import { mapMutations } from "vuex";
export default {
  components: { FoodList },
  props: ["index", "foodData",'addPoint','handleAddCart'],
  methods:{
     ...mapMutations('countAbout',['addCount'])
  },
  setup(props) {
    let data = reactive({
      active: 0,
      items: [],
      subItem: [],
    });
    const init = () => {
      let newList = [];
      props.foodData?.items?.map((i, index) => {
        newList.push({ text: i.text });
        if (data.active === index) {
          data.subItem = i.children;
        }
      });
      data.items = newList;
    };
    init();
    const navClick = (i) => {
      data.active = i;
      init();
    };
    // 切换步进器
    const addClick = (i) => {
      data.subItem.forEach((item) => {
        if (item.id === i) {
          item.add = false;
          item.num += 1;
        }
      });
    };

    // 步进器增加触发事件
    const onChange = (value, detail) => {
      data.subItem.forEach((item) => {
        if (item.id === detail.name) {
          item.num = value;
        }
        else if(item.num==0){
          item.add = true;
        }
      });

    };

    return { ...toRefs(data), navClick, addClick, onChange };
  },
};
</script>

<style lang="less" scoped>
/deep/ .van-swipe__indicator--active {
  background-color: #ffc400;
  width: 10px;
}
.action-bar {
  position: static;
}

.swiper {
  margin: 10px 0px;
  border-radius: 20px;
  padding: 0 10px;

  .my-swipe {
    border-radius: 20px;
    height: 80px;
    overflow: hidden;
  }
}
.order {
  .desc {
    padding: 0px 0px;
    text-align: left;
    .top-tag {
      padding: 0;
      margin: 0;
      border-radius: 5px;
      background: #ac905e;
      .star {
        background: #efe6d2;
        color: black;
        padding: 5px 5px;
        border-radius: 5px 0px 15px 5px;
      }
      .mustBuy {
        background: #ac905e;
        padding: 5px 5px;
        border-radius: 0px 5px 5px 0;
      }
    }
    .shops {
      p {
        margin: 0px 0px 5px 0px;
        color: slategrey;
      }
      .title {
        font-weight: 600;
        font-size: 15px;
        color: black;
      }
      .price {
        color: black;
        font-weight: 600;
        font-size: 16px;
      }
    }
  }
}
</style>